<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { UPDATE_MODEL_EVENT } from '@jctech/constants/event';
import { checkboxEmits, chexkboxItemProps } from './checkboxSrc';

const props = defineProps(chexkboxItemProps);
const emits = defineEmits(checkboxEmits);
defineOptions({
  name: 'CCheckboxItem'
});
const isModelValue = ref(null);
const checkboxItemRef = ref(null);
onMounted(() => {
  if (props.modelValue === props.dvalue) {
    isModelValue.value = true;
  } else {
    isModelValue.value = false;
  }
});
const handleChange = (value) => {
  if (value) {
    emits(UPDATE_MODEL_EVENT, props.dvalue);
  } else {
    const _value = typeof props.dvalue === 'boolean' ? false : typeof props.dvalue === 'number' ? 0 : null;
    emits(UPDATE_MODEL_EVENT, _value);
  }
};
</script>

<template>
  <el-checkbox :key="`key_${props.label}`" v-model="isModelValue" :label="props.label" @change="handleChange" />
</template>
